import * as THREE from "three";
// 导入轨道控制器
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js"

// 导入动画库
import gsap from "gsap"

// 导入 dat.gui： 轻量级ui界面控制库
import * as dat from "dat.gui"


// 了解three.js最基本的内容
// 1、创建场景
const scene =  new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)

// 设置相机位置
camera.position.set(0,0,10)
scene.add(camera)

// 添加物体
// 创建几何体
for(let i=0;i<50;i++){
//    每个三角形，需要3个顶点，每个顶点需要3个值
    const geometry = new THREE.BufferGeometry()
    const positionArray = new Float32Array(9)
    for(let j = 0 ; j<9;j++){
         positionArray[j] = Math.random()*10-5;
    }
    geometry.setAttribute('position',new THREE.BufferAttribute(positionArray,3))
    let color = new THREE.Color(Math.random(),Math.random(),Math.random())
    const material = new THREE.MeshBasicMaterial({
        color,
        transparent:true,
        opacity:0.5
    });
    const mesh = new THREE.Mesh(geometry,material)
    scene.add(mesh)
}


const cubeGeometry = new THREE.BoxGeometry(1,1,1);
const geometry = new THREE.BufferGeometry()
const vertics = new Float32Array([
    -1.0,-1.0,1.0,
    1.0,-1.0,1.0,
    1.0,1.0,1.0,
    1.0,1.0,1.0,
    -1.0,1.0,1.0,
    -1.0,-1.0,1.0,
])

geometry.setAttribute('position',new THREE.BufferAttribute(vertics,3))

// 创建材质
const cubeMaterial = new THREE.MeshBasicMaterial({color:0xffff00});
// 根据几何体和材质创建物体
// const cube = new THREE.Mesh(cubeGeometry,cubeMaterial)
// const cube1 = new THREE.Mesh(geometry,cubeMaterial)
 
// scene.add(cube1)

// 修改物体的位置
// cube.position.set(5,0,0);
// cube.position.x = 5

// 缩放位置
// cube.scale.set(3,2,1)
// cube.scale.x = 3;
// cube.scale.y = 2;
// cube.scale.z = 1

// 旋转
// cube.rotation.set(Math.PI/4,0,0)
// cube.rotation.x = Math.PI/4

// 将几何体添加到场景当中
// scene.add(cube)

//初始化渲染器
const renderer = new THREE.WebGLRenderer({
    
})

// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
//将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement)
// 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene,camera)

// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement);
// 设置控制器阻尼，让控制器更有真实效果，必须在动画循环里调用update()
controls.enableDamping = true

//  添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// 设置时钟
const clock = new THREE.Clock();

// 设置动画
/*const animate = gsap.to(cube.position,{ 
    x:5,
    duration:5,
    ease:"power1.inOut",
    repeat: -1, // 设置重复次数， 无限次循环-1
    yoyo:true, // 往返运动
    delay: 2, // 延迟
    onComplete:()=>{
        console.log('动画完成啦')
    },
    onStart:()=>{
        console.log('动画开始啦')
    }
})*/
// gsap.to(cube.rotation,{x:2*Math.PI,duration:5,ease:"power1.in"})

window.addEventListener('dblclick',()=>{
/*    // 控制动画状态
    if(animate.isActive()){
      animate.pause()
    }else{
      animate.resume()
    }*/
    
//    双击控制屏幕进入全屏，退出全屏
    if(!document.fullscreenElement){
        renderer.domElement.requestFullscreen()
    }else{
        document.exitFullscreen()
    }
})

function render(){
    controls.update()
/*    // 获取时钟运行的总时长
    let time = clock.getElapsedTime();
    console.log('[mLog]  --> 时钟运行的总时长：',time);
    let deltaTime = clock.getDelta();
    console.log('[mLog]  --> 两次获取时间的间隔时间：', deltaTime)
    let t = time % 5;
    cube.position.x = t * 1;*/
    
/*    // requestAnimation 时间参数.控制物体动画
    let t = (time / 1000 ) % 5;
    let x= t * 1;
    cube.position.x = x;
    if(cube.position.x > 5){
        cube.position.x = 0
    }
    cube.rotation.x += 0.01; */
    
    renderer.render(scene,camera)
    // 渲染下一帧的时候就会调用render函数
    requestAnimationFrame(render)
}

render();


// 监听画面变化，更新渲染画面
window.addEventListener('resize',()=>{
    console.log('画面变化了~')
    // 更新摄像头
    camera.aspect = window.innerWidth/window.innerHeight;
    // 更新摄像机的投影矩阵
    camera.updateProjectionMatrix()
    
    // 更新渲染器
    renderer.setSize(window.innerWidth,window.innerHeight)
    // 设置渲染器的像素比
    renderer.setPixelRatio(window.devicePixelRatio)
    
})


const gui = new dat.GUI();
// 设置拉条
gui.add(cube.position,"x").min(0).max(5).step(0.01).name("移动x轴").onChange(v=>{
    console.log('植被修改：',v)
}).onFinishChange(v=>{
    console.log('[mLog] 完全停下来 -->',v)
});

let ani
const params = {
    color: '#ffff00',
    fn:()=>{
    //    让立方体运动起来
        if(ani){
            console.log('[mLog] ani -->',ani)
            ani.pause()
            cube.position.x = 0
            ani.restart()
        }else{
            ani = gsap.to(cube.position,{x:5,duration:2,yoyo:true,repeat:-1})
        }
    }
}
// 设置颜色
gui.addColor(params,"color").onChange(v=>{
    console.log('[mLog] v -->',v)
    cube.material.color.set(v)
})
// 设置选项框
gui.add(cube,"visible").name("是否显示")
// 设置按钮，点击触发某个事件
gui.add(params,'fn').name('立方体运动')

//
const folder = gui.addFolder("设置立方体")
folder.add(cube.material,'wireframe')
